<template>
   <div>
      <el-table
         :data="$store.state.HomeMoudule.listdata.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)"
         style="width: 100%">
         <el-table-column type="index" width="50" />
         <el-table-column prop="id" label="入住年份" width="auto" />
         <el-table-column prop="title" label="楼盘" width="auto" />
         <el-table-column prop="type" label="房源类型" width="auto" />
         <el-table-column prop="hometype" label="房源户型" width="auto" />
         <el-table-column prop="name" label="户主姓名" width="auto" />
         <el-table-column prop="num" label="门牌号" width="auto" />

         <el-table-column label="操作">
            <template #default="scope">
               <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
               <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="addlistdata">
         <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            layout="total, sizes, prev, pager, next, jumper" :small="small" :disabled="disabled"
            :background="background" :total="$store.state.HomeMoudule.listdata.length" :current-page="currentPage4"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
         <!-- <button class="addbtn" size="small" @click="handleAdd()">添加</button> -->
         <el-button class="addbtn" type="primary" @click="handleAdd()" round>添加用户信息</el-button>
      </div>



      <!-- 修改的弹出框 -->
      <ud />
      <!-- 删除的弹出框 -->
      <Dd />
      <!-- 修改的弹出框 -->
      <ad />
   </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, onUpdated } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import ud from "../../../components/UpdataDialog.vue";
import Dd from "../../../components/DeldataDialog.vue";
import ad from "../../../components/AdddataDialog.vue";
import { useStore } from "vuex";

let search = ref("")
let store = useStore()

const currentPage4 = ref(1)//当前页数
const pageSize4 = ref(10)//每页显示条数
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
   pageSize4.value = val
}
const handleCurrentChange = (val: number) => {
   currentPage4.value = val
}

interface User {
   id: string
   name: string
   address: string
}


const handleEdit = (index: number, row: User) => {
   console.log(index, row);
   console.log("这是index内容", index);
   store.commit("SET_DIALOG", row)
   console.log("获取到修改数据", store.state.HomeMoudule.uplistData);
}
const handleDelete = (index: number, row: User) => {
   console.log(index, row),
   store.commit("SET_DEL", row)
}
const handleAdd = () => {
   store.commit("SET_ADD")
}

onMounted(() => {
   store.dispatch("USERUPDATA_LIST")
})



</script>

<style lang='scss'>
.addlistdata {
   display: flex;

}

.addbtn {
   border: none;
   color: #606266;
   background-color: #ffffff;
   font-size: 13px;
   width: 100px;
   height: 40px;
   margin-top: 10px;
   margin-left: 600px;
}
</style>